<template>
  <div class="scrollable-content">
  <h6 style="color: crimson">商品与赠品管理--><a href="http://localhost:5173/gift">赠品管理</a>-->赠品转商品管理</h6>

  <el-form ref="queryFormRef" :inline="true" :model="queryForm" class="demo-form-inline">

    <el-form-item label="赠品名称" prop="giftName">
      <el-input v-model="queryForm.giftName" placeholder="请输入赠品名称" />
    </el-form-item>
    <el-form-item label="赠品类型" prop="giftType">
      <el-select v-model="queryForm.giftType" placeholder="请选择赠品类型" style="width: 240px" clearable >
        <el-option
            v-for="item in typeOptions.optionData"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="审核状态" prop="applyStatus">
      <el-select v-model="queryForm.applyStatus" placeholder="请选择审核状态" style="width: 240px" clearable >
        <el-option value="未通过" label="未通过">未通过</el-option>
        <el-option value="已通过" label="已通过">已通过</el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Search" @click="querySubmit">查询</el-button>
      <el-button type="primary" icon="Plus" @click="addGift2Good">新增赠品转商品</el-button>
    </el-form-item>
  </el-form>

  <hr>
  <el-table
      :data="tableList.tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
  >
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="giftName" label="赠品名称" width="180" />
    <el-table-column prop="giftType" label="赠品类型" width="180" />
    <el-table-column prop="marketPrice" label="赠品单价" width="180" />
    <el-table-column prop="count" label="数量" width="180" />
    <el-table-column prop="applyStatus" label="审核状态" width="180" >
      <template #default="scope">
        <el-tag v-if="scope.row.applyStatus=='未通过'" type="warning">{{scope.row.applyStatus}}</el-tag>
        <el-tag v-else-if="scope.row.applyStatus=='已通过'" type="success">{{scope.row.applyStatus}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column  label="操作" >
      <template #default="scope">
        <el-button type="primary" size="small" icon="Right" @click="examine(scope.$index, scope.row)">审核跟踪</el-button>
        <el-button type="success" size="small" icon="Search" @click="getDetail(scope.$index, scope.row)">查看</el-button>

        <el-button type="danger" size="small" icon="Delete" @click="del(scope.$index, scope.row)">删除</el-button><br>
        <el-button type="info" size="small" @click="updateDetail(scope.$index, scope.row)"
                   v-show="scope.row.applyStatus=='未通过'">修改</el-button>


      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
        :page-sizes="[2, 5, 10, 50]"
        layout="total, sizes, prev, pager, next"
        :total="tableList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog
      v-model="DialogVisible"
      title="查看"
      width="500"
  >
    <el-form  label-width="90" >
      赠品名称:       {{giftDetail.gname}}
      <hr> 赠品类型:  {{giftDetail.gtype}}
      <hr> 赠品型号:  {{giftDetail.gmodel}}
      <hr> 赠品单价:  {{giftDetail.marketPrice}}
      <hr> 赠品颜色:  {{giftDetail.gcolor}}
      <hr> 赠品品牌:  {{giftDetail.gbrand}}
      <hr> 赠品数量: {{giftDetail.giftNUm}}
      <hr> 提交数量：{{updateForm.updateData.count}}
    </el-form>
    <template #footer>

    </template>
  </el-dialog>

  <el-dialog
      v-model="updateDialogVisible"
      title="修改赠品转商品"
      width="500"
  >
    <el-form ref="updateFormRef"  :model="updateForm.updateData" label-width="90" >
      赠品名称:       {{giftDetail.gname}}
      <hr> 赠品类型:  {{giftDetail.gtype}}
      <hr> 赠品型号:  {{giftDetail.gmodel}}
      <hr> 赠品单价:  {{giftDetail.marketPrice}}
      <hr> 赠品颜色:  {{giftDetail.gcolor}}
      <hr> 赠品品牌:  {{giftDetail.gbrand}}
      <hr> 赠品数量: {{giftDetail.giftNUm}}

      <hr>
      <el-form-item label="输入入库数" prop="num" >
        <el-input v-model="updateForm.updateData.count" placeholder="数量" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="updateSubmit">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>

  </div>
</template>

<script  setup>
import {ref,reactive,onMounted,getCurrentInstance} from "vue";
import axios from "@/plugins/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {giftStore} from "@/stores/GiftModel.js";
import {
  Plus,Search,Delete,Check,Right
} from '@element-plus/icons-vue'
const giftModel = giftStore()
const updateDialogVisible=ref(false)
const DialogVisible=ref(false)
const addDialogVisible=ref(false)


const giftDetail =ref({
  gname: "",
  gtype: "",
  gmodel: "",
  marketPrice: "",
  purchasePrice: "",
  minStock: "",
  gcolor: "",
  gbrand: "",
  giftNUm:0
})
const addGift2Good = ()=>{
  giftModel.userModel={
    giftId:0,
    count:0,
    applyStatus:"未通过",
    gift2goodsId:0,
    userId:0
  }
  router.push({path:"/gift/addGift2Goods"})
}

const del=(index,row)=>{
  axios.delete("/gift2goods/deleteGift2Goods/"+row.id).then((res) => {
    if (res.code === 200){
      ElMessage.success("删除成功")

    }
    query()
  });
}

const getDetail=(index,row)=>{
  DialogVisible.value = true
  const id=row.id
  updateForm.updateData.count=row.count
  updateForm.updateData.id=row.id
  //获取要添加的赠品的详细信息
  axios.get("/gift2goods/getGifts2GoodsBYId/"+id).then((res) => {
    if (res.code === 200){
      console.log(res.data)
      const giftId=res.data.giftId
      axios.get("/gift/getGiftDetail/"+giftId).then((res) => {
        if (res.code === 200){
          giftDetail.value=res.data;
          axios.get("/gift2goods/getGiftNum/"+giftId).then( res=>{
            console.log(res.data.giftNum)
            giftDetail.value.giftNUm=res.data.giftNum
          })
        }
      });
    }
  });
}

const updateForm =reactive( {updateData:{id:0,count:0}})



const updateDetail=(index,row)=>{
  updateDialogVisible.value = true
  const id=row.id
  updateForm.updateData.count=row.count
  updateForm.updateData.id=row.id
  //获取要添加的赠品的详细信息
  axios.get("/gift2goods/getGifts2GoodsBYId/"+id).then((res) => {
    if (res.code === 200){
      console.log(res.data)
      const giftId=res.data.giftId
      axios.get("/gift/getGiftDetail/"+giftId).then((res) => {
        if (res.code === 200){
          giftDetail.value=res.data;
          axios.get("/gift2goods/getGiftNum/"+giftId).then( res=>{
            console.log(res.data.giftNum)
            giftDetail.value.giftNUm=res.data.giftNum
          })
        }
      });
    }
  });

}
const updateSubmit=()=>{
  axios.postJson("/gift2goods/updateGifts2Goods",updateForm.updateData).then(
      res=>{
        console.log(res.data)
        if (res.code===200){
          ElMessage.success("修改成功")
          query()
          updateDialogVisible.value = false

        }

      }
  )
}


const gift2good=()=>{
  router.push({path:"/gift/giftAdd"})
}

const examine=(index,row)=>{
  giftModel.$id=row.id
  giftModel.applyStatus=row.applyStatus
  router.push({path:"/gift/examineGiftDetail"})
}

const queryForm = ref({
  pageSize:10,
  pageNum:0
});
const querySubmit = () => {
  query()
};

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex%2 === 1) {
    return 'warning-row';
  } else{
    return 'success-row';
  }
  return '';
};

const tableList =reactive({tableData:[],total:10})
const handleSizeChange = (val) => {
  queryForm.value.pageSize=val
  query()
};
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  queryForm.value.pageNum=(val-1)*queryForm.value.pageSize
  query()
};
const typeOptions  =  reactive({optionData:[]})
onMounted(()=>{
      query()
      axios.get("/gift2goods/paramList").then(res=>{
        if(res.code===200){
          console.log(res.data)
          typeOptions.optionData=res.data
        }
      })
}
)

/**
 * 公共方法
 */
const query=()=>{
  axios.postJson("/gift2goods/getGifts2GooodsVo",queryForm.value).then( res=>{
    tableList.tableData=res.data
  })
  axios.get("/gift2goods/getTatol").then( res=>{
    tableList.total=res.data
  })
}
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.scrollable-content {

  height: 90%; /* 定义高度 */
  overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
  border: 1px solid #ccc; /* 可选的边框 */
}
</style>